<template>
    <div class="video-play" @click="onClick">
        <video class="help-video" ref="posterImgRef" :controls="false" :poster="`${_oss_}images/help/poster.png`"
            :src="props.src"></video>
        <img class="play-img" :src="`${_oss_}images/help/play.png`" v-show="playImgVisible" />
    </div>
</template>
<script setup>
import { ref } from "vue";
const playImgVisible = ref(true);
const maskVisible = ref(false);
const posterImgRef = ref(null);
const ms = 800;
let timer = null;

const props = defineProps({
    src: {
        type: String,
        default: "",
    },
});

function addMask(top, right, onClick) {
    const mask = document.createElement("div");
    const closeIcon = document.createElement("img");
    closeIcon.src = _oss_ + "images/icon-close.svg";
    closeIcon.className = "close-icon";
    closeIcon.style.top = top - 40 + "px";
    closeIcon.style.right = right - 40 + "px";
    closeIcon.style.display = "none";
    setTimeout(() => {
        closeIcon.style.display = "";
    }, ms);
    closeIcon.onclick = () => {
        mask.remove();
        typeof onClick === "function" && onClick();
    };
    mask.className = "mask";
    mask.appendChild(closeIcon);
    document.body.appendChild(mask);
}

const onClick = () => {
    const newVideo = posterImgRef.value.cloneNode();
    const w = window.innerWidth;
    const h = window.innerHeight;
    const { left, top, width, height } =
        posterImgRef.value.getBoundingClientRect();
    const scaleWidth = window.innerWidth * 0.6;
    const scaleHeight = (height * scaleWidth) / width;
    newVideo.style.position = "fixed";
    newVideo.style.left = `${left}px`;
    newVideo.style.top = `${top}px`;
    newVideo.style.width = `${width}px`;
    newVideo.style.height = `${height}px`;
    newVideo.style.zIndex = `1001`;
    newVideo.style.transition = `all ${ms}ms`;
    document.body.appendChild(newVideo);

    setTimeout(() => {
        addMask((h - scaleHeight) / 2, (w - scaleWidth) / 2, () => {
            clearTimeout(timer);
            newVideo.style.left = `${left}px`;
            newVideo.style.top = `${top}px`;
            newVideo.style.width = `${width}px`;
            newVideo.style.height = `${height}px`;
            newVideo.controls = false;
            newVideo.pause();
            newVideo.src = "";
            setTimeout(() => {
                playImgVisible.value = true;
                posterImgRef.value.style.visibility = "";
                newVideo.remove();
            }, ms);
        });
        maskVisible.value = true;
        posterImgRef.value.style.visibility = "hidden";
        playImgVisible.value = false;
        newVideo.play();
        newVideo.style.width = scaleWidth + "px";
        newVideo.style.height = scaleHeight + "px";
        newVideo.style.top = (h - scaleHeight) / 2 + "px";
        newVideo.style.left = (w - scaleWidth) / 2 + "px";

        timer = setTimeout(() => {
            newVideo.controls = true;
        }, ms);
    }, 250);
};
</script>
<style lang="scss">
.help-video {
    background-color: #000;
    border-radius: 6px;
    overflow: hidden;
}

.close-icon {
    position: absolute;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.video-play {
    width: 360px;
    height: 190px;

    .help-video {
        width: 100%;
        height: 100%;
    }

    .play-img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
</style>
